<template>
  <div class="course-detail">
    <van-nav-bar :title="courseDetail.title" left-arrow :fixed="true" :placeholder="true" :z-index="999"
      :safe-area-inset-top="true" @click-left="goBack"  />
    <div class="loading-box" v-show="isLoading">
      <van-loading size="24" />
    </div>
    <div class="top-learning" v-show="!isLoading">
      <img class="background-img" src="@static/img/bg.png" />
      <!-- 封面部分 -->
      <div class="pic">
        <div class="img">
          <img :src="courseDetail.cdnPicture" alt="" class="background-img" />
        </div>

      </div>
    </div>
    <!-- 课程详情 -->
    <div class="course-detail-data" v-show="!isLoading">
      <!-- 课程标题 -->
      <div class="course-title">
        <span>{{ courseDetail.title }}</span>
      </div>
      <template v-if="courseDetail.eligible=='all'">
        <div class="pub-time" v-if="courseDetail.credit > 0 && courseDetail.certificateTitle">学习完成可获得<span>{{ courseDetail.credit }}</span>学分和证书<span>《{{
        courseDetail.certificateTitle }}》</span></div>
        <div class="pub-time" v-if="courseDetail.credit > 0 && !courseDetail.certificateTitle">学习完成可获得<span>{{ courseDetail.credit }}</span>学分</div>
        <div class="pub-time" v-if="!courseDetail.credit && courseDetail.certificateTitle">学习完成可获得证书<span>《{{
        courseDetail.certificateTitle }}》</span></div>
      </template>
      <template v-else>
        <div class="pub-time" v-if="courseDetail.credit > 0 && courseDetail.certificateTitle">完成学习进度{{courseDetail.learnProgress}}%可获得<span>{{ courseDetail.credit }}</span>学分和证书<span>《{{
        courseDetail.certificateTitle }}》</span></div>
        <div class="pub-time" v-if="courseDetail.credit > 0 && !courseDetail.certificateTitle">完成学习进度{{courseDetail.learnProgress}}%可获得<span>{{ courseDetail.credit }}</span>学分</div>
        <div class="pub-time" v-if="!courseDetail.credit && courseDetail.certificateTitle">完成学习进度{{courseDetail.learnProgress}}%可获得证书<span>《{{
        courseDetail.certificateTitle }}》</span></div>
      </template>

      <div class="progress-box" v-if="courseInfo.progress > 0">
        <span class="progress-text" v-if="courseInfo.progress == 0">未开始</span>
        <span class="progress-text" v-else-if="courseInfo.progress == 100">已完成</span>
        <span class="progress-text" v-else>学习中</span>

        <div class="text">进度：{{ courseInfo.progress }}%</div>
      </div>

      <!-- 课程目录 -->
      <div class="course-lesson-list">
        <div class="tit">课件列表：</div>
        <ul class="lesson-list">
          <li v-for="(list, index) in coursewareList" :id="'lesson-list-' + list.uuid" :key="list.id"
            :class="{ 'learning-lesson': lastLearnData && lastLearnData.uuid === list.uuid }"
            @click="courseLearn(list, index)">
            <div class="type">
              <i
                class="iconfont icon-shipin1"
                style="color: #ff4d4f"
                v-if="list.type == 'video'"
              ></i>
              <template v-else-if="list.type == 'document'">
                <i
                  v-if="list.fileType == 'txt'"
                  class="iconfont icon-txt"
                  style="color: #4c98fc;"
                ></i>
                <i
                  v-else-if="
                    list.fileType == 'xls' || list.fileType == 'xlsx'
                  "
                  class="iconfont icon-xlsx"
                  style="color: #039e55;"
                ></i>
                <i
                  v-else-if="list.fileType == 'wps'"
                  class="iconfont icon-meeting-icon-WPS"
                  style="color: #1b90ff"
                ></i>
                <i
                  v-else-if="
                    list.fileType == 'ppt' || list.fileType == 'pptx'
                  "
                  class="iconfont icon-ppt"
                  style="color: #f97f11"
                ></i>
                <i
                  v-else-if="list.fileType == 'pdf'"
                  class="iconfont icon-PDF"
                  style="color: #dd315b"
                ></i>
                <i
                  v-else
                  class="iconfont icon-icon-doc"
                  style="color: #1b90ff"
                ></i>
              </template>
            </div>
            <div class="cont">
              <div class="top">
                <span class="title" :class="{ 'font-color': lastLearnData && lastLearnData.uuid === list.uuid }">
                  {{ list.title }}
                </span>
              </div>
              <div class="bottom">
                <div class="tab">时长：{{ list.length | timeLong }}</div>

                <template>
                  <span v-if="list.progress == 100" class="progressa"> 已完成 </span>
                  <span v-else class="progress">{{ list.progress }} %</span>
                </template>
              </div>
            </div>
            <div class="suo" v-if="courseDetail.learnMode == 'unlock' && !list.isUnlocked && index > coursewareIndex">
              <i class="iconfont icon-suo4"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import { getCourseDetails, getCourseLessons } from '@/api/course'
import { ImagePreview } from 'vant'
export default {
  name: 'knowledgeDetail',
  components: {},
  data() {
    return {
      courseId: this.$route.query.uuid,
      jumpFrom: this.$route.query.jumpFrom,
      learnFrom: this.$route.query.learnFrom, // 判断是不是讲师页面跳转过来的
      lectorId: this.$route.query.lectorId, // 讲师ID
      companyId: window.localStorage.getItem('companyId'),
      courseDetail: {}, // 课程详情
      courseInfo: {}, // 学员学习课程详情
      coursewareList: [], // 课程列表
      isDrag: 'close', // 课件是否可拖动
      doubleSpeed: 'close', // 是否开启倍速
      lastLearnData: {}, // 上节学习的课程
      coursewareIndex: 0, // 当前课件学习的序列号
      isLoading: true // 加载中
    }
  },
  computed: {},
  mounted() {
    // 获取课程详情
    this.getCourseDetail(() => {
      this.getLessonList()
    })
  },
  methods: {
    // 预览证书
    checkCertificate(url) {
      ImagePreview({
        images: [url],
        closeable: true
      })
    },
    goBack() {
      if (this.learnFrom == 'lecturer') {
        this.$router.replace({
          name: 'lecturerDetail',
          query: {
            uuid: this.lectorId
          }
        })
      } else {
        this.$router.replace({
          name: 'knowledge',
        })
      }
    },

    // 获取课程详情
    getCourseDetail(callback) {
      new Promise(reslove => {
        getCourseDetails(this.courseId)
          .then(res => {
            if (res.code == '200') {
              this.isLoading = false
              // 课程详情
              this.courseDetail = res.info

              // 学员学习情况
              this.courseInfo = res.courseUser ? res.courseUser : {}

              reslove()
            }
          })
          .catch(err => {
            console.log(err)
            setTimeout(() => {
              this.$router.replace({
                path: '/index'
              })
            }, 1000)
          })
      })
        .then(() => {
          if (callback && typeof callback === 'function') {
            callback()
          }
          // 是否允许首次拖动
          this.isDrag = this.courseDetail.drag
          // 是否开启倍速
          this.doubleSpeed = this.courseDetail.speed
          if (this.courseInfo) {
            this.lastLearnData = this.courseInfo.lastLearnData ? this.courseInfo.lastLearnData : {}
          } else {
            this.lastLearnData = {}
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    /**
     * 获取当前课件学习的序列号
     */
    getLessonIndex() {
      if (Object.keys(this.coursewareList).length && Object.keys(this.lastLearnData).length) {
        this.coursewareList.forEach((lesson, index) => {
          if (lesson.uuid === this.lastLearnData.uuid) {
            this.coursewareIndex = index
          }
        })
      }
    },

    // 加载课件列表
    getLessonList() {
      new Promise(reslove => {
        getCourseLessons({
          courseId: this.courseId,
          from: 'course',
          sourceId: this.courseId
        })
          .then(res => {
            this.coursewareList = res.data
            reslove()
          })
          .catch(err => {
            console.log(err)
          })
      })
        .then(() => {
          this.getLessonIndex()
        })
        .catch(err => {
          console.error(err)
        })
    },

    // 跳转播放
    gotoJump(index) {
      if (Number(index) >= 0) {
        this.lastLearnData = this.coursewareList[index]
      }

      if (this.lastLearnData && this.lastLearnData.uuid) {
        this.coursewareId = this.lastLearnData.uuid
        this.coursewareType = this.lastLearnData.type
      } else if (this.coursewareList.length > 0) {
        let num = index ? index : 0

        let firstLesson = this.coursewareList[num]
        this.coursewareId = firstLesson.uuid
        this.coursewareType = firstLesson.type

        if (this.coursewareIndex == 0) {
          this.coursewareIndex = num
        }
      }

      this.startLearn(index)
    },

    // 跳转学习页面
    startLearn(index) {
      const _index = index ? index : 0
      // console.log(this.coursewareType)
      this.$router.push({
        name: 'learnKnowledge',
        query: {
          uuid: this.courseId,
          coursewareType: this.coursewareType,
          coursewareId: this.coursewareId,
          coursewareIndex: _index,
          isDrag: this.isDrag,
          doubleSpeed: this.doubleSpeed,
          learnMode: this.courseDetail.learnMode,
          type: this.type,
          from: 'course',
          learnFrom: this.learnFrom,
          lectorId: this.lectorId
        }
      })
    },

    /**
     * 点击课件进行学习
     * @param {object} list 课件数据
     * @param {number} index 课件序列号
     */
    courseLearn(list, index) {
      let oldIndex = this.coursewareIndex
      this.coursewareId = list.uuid
      this.coursewareType = list.type
      this.coursewareIndex = index

      if (this.courseDetail.learnMode == 'unlock') {
        // 解锁式学习
        if (list.isUnlocked) {
          this.gotoJump(index)
        } else {
          this.coursewareIndex = oldIndex
          this.$toast('请按顺序学习') // 请按顺序学习
        }
      } else {
        this.gotoJump(index)
      }
    }
  }
}
</script>

<style scoped lang="less">
@import 'index';
</style>
